<template>
  <div class="chart-main" ref="chartInstance"> </div>
</template>
<script>

import {MixinChartsOptions} from './utils/chartsOptionsMixin'
const mixinsOptions = new MixinChartsOptions()

export default {
  props: {
    options:Object,
  },
  data() {
    return {
      chartInstance: null,
    }
  },
  mounted() {
    this.chartInstance = this.$echarts.init(this.$refs.chartInstance)
    window.addEventListener('resize', () => { this.resize() })
  },
  methods: {
    initChart() {
      const options = {}
      const mixedOptions = mixinsOptions.mixinOptions(options, this.options || {})  // 融合自定义的配置和默认的配置
      this.chartInstance.setOption(mixedOptions)
      // 下面的是自适应屏幕大小去缩放
      this.$nextTick(() => {
        setTimeout(() => this.resize(), 500)
      })
    },
    resize() {
      this.chartInstance.resize({ height: '283px' })
    }
  }
}
</script>